<template>
  <div class="con">
      <div class="bar">
        <el-select v-model="value"  size="mini" @change="langChange" :placeholder="language">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-button type="success" icon="el-icon-check" circle @click="RunResult"></el-button> -->
        <el-select v-model="theme" size="mini" @change="themeChange" placeholder="请选择主题">
            <el-option
                v-for="item in themeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
      </div>
      <div class="edit">
        <MyEditor
            ref="child"
            @onMounted="onMounted"
            @onCodeChange="onCodeChange" />
      </div>
  </div>
</template>
 
<script>
import Vue from 'vue';
import { Select ,Option,Button} from 'element-ui';
import MyEditor from './myEditor';
Vue.use(Select );
Vue.use(Option);
Vue.use(Button);
export default {
  components:{
    MyEditor
  },
  data () {
    return {
      options: [{
          value: 'json',
          label: 'json'
        }, {
          value: 'typescript',
          label: 'javascript'
        }, {
          value: 'html',
          label: 'html'
        }, {
          value: 'css',
          label: 'css'
      }],
      themeOption:[
          {
              value:'vs',
              label:'默认'
          },
          {
              value:'hc-black',
              label:'高亮'
          },
          {
              value:'vs-dark',
              label:'深色'
          },
      ],
      value:'',
      theme:'vs-dark',
      language: 'javascript'
    }
  },
  methods:{
    onMounted(edit){
      //console.log('onMounted',edit);
    },
    onCodeChange(){//太频繁，暂时不处理该事件
      //console.log('onCodeChange',value,event);
    },
    themeChange(val){
        this.$refs.child.theme = val;
        this.$refs.child.updateEdit(false);
    },
    langChange(val) {
      this.$refs.child.language = val;
      this.$refs.child.updateEdit(false);
    },
    openPage(codes,lang) {
      //console.log('edit.vue--',codes,lang);
      this.value = lang;
      this.$refs.child.language = lang;
      this.$refs.child.codes = codes;
      this.$refs.child.updateEdit(true);
    }
  }
}
</script>
<style scoped>
  .con {
    top: 0px;
    height: 100%;
  }
  .bar {
    padding-top: 8px;
    padding-right: 8px;
    text-align: right;
    height: 40px;
  }
  .edit {
    top:46px;
    height: 100%;
  }
</style>